Vue.component('tabs', {
    template: '<div class="tabs">' +
        '<div class="tabs-bar">' +
        '<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">' +
        '{{ item.label }}' +
        '</div>' + //标签页标题,用v-for
        '</div>' +
        '<div class="tabs-content">' +
        '<slot></slot>' + // 这里的slot就是嵌套的pane
        '</div>' +
        '</div>',
    props: {
        value: {
            type: [String, Number]
        }
    },
    data: function () {
        return {
            currentValue: this.value,
            // 渲染标题
            navList: []
        }
    },
    methods: {
        tabCls: function (item) {
            return [
                'tabs-tab',
                {
                    // 给选中的tab 追加一个class
                    'tabs-tab-active': item.name === this.currentValue
                }
            ]
        },
        /**
         * 获取pane组件
         * @returns {*[]}
         */
        getTabs() {
            return this.$children.filter(function (item) {
                // 遍历所有子组件,得到pane组件
                return item.$options.name === 'pane';
            });
        },
        // 当pane触发tabs.updateNav(),更新标题内容
        updateNav() {
            this.navList = [];
            //设置对this的引用，在function回调里， this指向的并不是Vue实例
            var _this = this; // 间接使用 this(tabs实例)
            this.getTabs().forEach(function (pane, index) {
                _this.navList.push({
                    label: pane.label,
                    name: pane.name || index
                });
                // pane没有设置name,则默认设置索引
                if (!pane.name) {
                    pane.name = index;
                }
                //设置当前选中的tab的索引
                if (index === 0) {
                    if (!_this.currentValue) {
                        _this.currentValue = pane.name || index;
                    }
                }
            });
            this.updateStatus();
        },
        /**
         * 显示pane组件中对应的内容,未选中则隐藏
         */
        updateStatus() {
            var tabs = this.getTabs();
            var _this = this;
            // 显示选中的pane组件,隐藏没有选中的
            tabs.forEach(function (tab) {
                return tab.show = tab.name === _this.currentValue;
            })
        },

        // 点击tabs时触发
        handleChange: function (index) {
            var nav = this.navList[index];
            var name = nav.name;
            this.currentValue = name;
            // 更新value
            this.$emit('input', name);
            this.$emit('on-click', name);
        }
    },
    watch: {
        value: function (val) {
            this.currentValue = val;
        },
        currentValue: function () {
            // tab变化时,更新pane的显示状态
            this.updateStatus();
        }
    }
})

